<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/auditShop' }">审批管理</el-breadcrumb-item>
			<el-breadcrumb-item>商户准入审批</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="approvaltitle">
			<div class="approvaltitle-left">
				<div class="title">审批信息</div>
				<div class="approvalflowpath">
					<div class="approvalflowpath-li"><img src="../../../../public/img/Fill1.png" /><span>录入商户</span></div>
					<div class="approvalflowpath-li"><img src="../../../../public/img/Fill2.png" /><span>审批中</span></div>
					
					<div class="approvalflowpath-li" v-if="editableTabs.auditStatus ==1"><img src="../../../../public/img/Fill31.png" /><span style="color: #00C4D3;">审批完成</span></div>
					<div class="approvalflowpath-li" v-else-if="editableTabs.auditStatus ==4"><img src="../../../../public/img/Fill32.png" /><span>撤销审批</span></div>
					<div class="approvalflowpath-li"v-else-if="editableTabs.auditStatus ==3"><img src="../../../../public/img/Fill33.png" /><span>审批驳回</span></div>
					<div class="approvalflowpath-li"v-else-if="editableTabs.auditStatus ==2"><img src="../../../../public/img/Fill34.png" /><span>审批通过</span></div>
				</div>
			</div>
			<div class="approvaltitle-right" v-if="editableTabs.auditStatus ==1">
				<el-button type="primary"  @click="adoptFormVisible = true">审批通过</el-button>
				<el-button type="danger" @click="refuseFormVisible = true">审批驳回</el-button>
			</div>
		</div>
		<div class="title">详细信息</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>商户编号</td>
					<td>{{editableTabs.shopId}}</td>
					<td>商户名称</td>
					<td>{{editableTabs.shopName}}</td>
				</tr>
				<tr>
					<td>联系人电话</td>
					<td>{{editableTabs.contactPhone}}</td>
					<td>商户法人</td>
					<td>{{editableTabs.legalPersonName}}</td>
				</tr>
				<tr>
					<td>商户电话</td>
					<td>{{editableTabs.shopPhone}}</td>
					<td>地址</td>
					<td>{{editableTabs.shopAddress}}</td>
				</tr>
				<tr>
					<td>商户简介</td>
					<td>{{editableTabs.shopIntroduce}}</td>
					<td>项目分类</td>
					<td>{{editableTabs.menu}}</td>
				</tr>
			</table>
		</div>
		<div class="title">账户信息</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>账户类型</td>
					<td>{{editableTabs.applAcTyp == '01'?'个人账户':'对公账户'}}</td>
					<td>收款账户</td>
					<td>{{editableTabs.corporateAccount}}</td>
				</tr>
				<tr>
					<td>所属银行及支行</td>
					<td>{{editableTabs.bank}}</td>
					<td>户名</td>
					<td>{{editableTabs.accountName}}</td>
				</tr>
				<tr>
					<td>开户行所在省</td>
					<td>{{editableTabs.provinceCode}}</td>
					<td>开户行所在市</td>
					<td>{{editableTabs.cityCode}}</td>
				</tr>
				<tr>
					<td>开户银行联行号</td>
					<td>{{editableTabs.bankNumber}}</td>
					<td>对公账户证明</td><!-- corporate -->
					<td><span v-if="editableTabs.corporate.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.corporate)">点击查看({{editableTabs.corporate.length}})</span> </td>
				</tr>
			</table>
		</div>
		<div class="title">营业执照</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>营业执照号</td>
					<td>{{editableTabs.businessLicenseNo}}</td>
					<td>企业名称</td>
					<td>{{editableTabs.enterpriseName}}</td>
				</tr>
				<tr>
					<td>营业执照</td><!-- license -->
					<td><span v-if="editableTabs.license.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.license)">点击查看</span></td>
				</tr>
			</table>
		</div>
		<div class="title">法人信息</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>法人姓名</td>
					<td>{{editableTabs.legalPersonName}}</td>
					<td>法人身份证号</td>
					<td>{{editableTabs.legalPersonIdCard}}</td>
				</tr>
				<tr>
					<td>法人身份证正面</td><!-- front -->
					<td><span v-if="editableTabs.front.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.front)">点击查看</span></td>
					<td>法人身份证反面</td><!-- back -->
					<td><span v-if="editableTabs.back.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.back)">点击查看</span></td>
				</tr>
			</table>
		</div>
		<div class="title">许可证</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>卫生许可证</td><!-- hygiene -->
					<td><span v-if="editableTabs.hygiene.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.hygiene)">点击查看</span></td>
					<td>医疗许可证</td><!-- medical -->
					<td><span v-if="editableTabs.medical.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.medical)">点击查看</span></td>
				</tr>
			</table>
		</div>
		<div class="title">其他信息</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>尽职调查报告</td><!-- diligence -->
					<td><span v-if="editableTabs.diligence.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.diligence)">点击查看({{editableTabs.diligence.length}})</span> </td>
					<td>商户现场照片</td><!-- merchant -->
					<td><span v-if="editableTabs.merchant.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.merchant)">点击查看({{editableTabs.merchant.length}})</span> </td>
				</tr>
				<tr>
					<td>其他补充资料</td><!-- other -->
					<td><span v-if="editableTabs.other.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.other)">点击查看({{editableTabs.other.length}})</span> </td>
				</tr>
			</table>
		</div>
		<div class="title">合同</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>资方-商户合同</td><!-- management -->
					<td><span v-if="editableTabs.management.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.management)">点击查看({{editableTabs.management.length}})</span> </td>
					<td>时尖-商户合同</td><!-- acetech -->
					<td><span v-if="editableTabs.acetech.length>=1" class="viewpicture" @click="openDialogVisible(editableTabs.acetech)">点击查看({{editableTabs.acetech.length}})</span> </td>
				</tr>
			</table>
		</div>
		<div class="title">审批信息</div>
		<div class="infolist">
			<table class="infotable" border="1" bordercolor="#cccccc" cellpadding="10px" cellspacing="0">
				<tr>
					<td>提交人</td>
					<td>{{editableTabs.businessAffairsName}}</td>
					<td>提交人手机号</td>
					<td>{{editableTabs.businessAffairsPhone}}</td>
				</tr>
				<tr>
					<td>提交时间</td>
					<td>{{editableTabs.submitTime}}</td>
					<td>审批状态</td>
					<td>
						{{editableTabs.auditStatus==0?'未提交':''}}
						{{editableTabs.auditStatus==1?'待审核':''}}
						{{editableTabs.auditStatus==2?'审核通过':''}}
						{{editableTabs.auditStatus==3?'拒绝':''}}
						{{editableTabs.auditStatus==4?'撤销':''}}
					</td>
				</tr>
			</table>
		</div>
		
		<div class="block">
		  <el-timeline>
		    <el-timeline-item v-for="(item,index) in blocklist" :key="index" placement="top" color="#1989fa" hide-timestamp="true">
		      <el-card>
		        <div class="blocktit">
					<h4>{{item.auditUserName}}</h4>
					<h6>提交于 {{item.createTime}}</h6>
				</div>
		        <p>{{item.auditStatus==1?'提交审批，等待审批结果':''}}{{item.auditStatus==2?'审核通过。备注信息：'+item.auditRemark:''}}{{item.auditStatus==3?'驳回审批。驳回原因：'+item.auditRemark:''}}{{item.auditStatus==4?'撤销审批':''}}</p>
		      </el-card>
		    </el-timeline-item>
		  </el-timeline>
		</div>
		
		
		<el-dialog title="审批通过" :visible.sync="adoptFormVisible">
		  <el-form>
		    <el-form-item label="备注信息" >
		      <el-input type="textarea" placeholder="请输入备注信息(选填)" v-model="approvedRemark" autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="adoptFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="approved">确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog title="审批驳回" :visible.sync="refuseFormVisible">
		  <el-form>
		    <el-form-item label="驳回原因" >
		      <el-input type="textarea" placeholder="请输入驳回原因" v-model="refuseRemark"  autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="refuseFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="refuse">确 定</el-button>
		  </div>
		</el-dialog>
		
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="80%">
		  <div class="demo-image__preview">
		    <el-image 
				v-for="(item,index) in srcList"
		      style="width: 180px; height: 180px;margin-bottom: 20px;"
		      :src="item" 
		      :preview-src-list="srcList">
		    </el-image>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				approvalflowpath:4,
				adoptFormVisible: false,
				refuseFormVisible: false,
				dialogVisible:false,
				approvedRemark:'',
				blocklist:[],
				srcList: [
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
				  'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
				],
				editableTabs:[],
				options1:[],/* 品类列表 */
				refuseRemark:''
			}
		},
		created() {
			this.getCategory()
			this.getList()
			this.getblock()
		},
		methods:{
			openDialogVisible(srcList){
				var list = []
				srcList.forEach(item=>{
					list.push(item.imgUrl)
				})
				this.srcList = list
				this.dialogVisible=true
			},
			async getCategory(){
				const {data:res} = await this.$http.get('/shopManage/menuList')
				this.options1 = res.data
				
			},
			async getList(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/shopManage/queryDetailsByShopId',{id:this.$route.query.shopId})
				console.log(res)
				this.editableTabs = res.data
				this.options1.forEach(item=>{
					if(item.menuId==this.editableTabs.menuId){
						this.$set(this.editableTabs,'menu',item.name)
					}
				})
				this.$set(this.editableTabs,'corporate',[]);
				this.$set(this.editableTabs,'license',[]);
				this.$set(this.editableTabs,'front',[]);
				this.$set(this.editableTabs,'back',[]);
				this.$set(this.editableTabs,'hygiene',[]);
				this.$set(this.editableTabs,'medical',[]);
				this.$set(this.editableTabs,'diligence',[]);
				this.$set(this.editableTabs,'merchant',[]);
				this.$set(this.editableTabs,'other',[]);
				this.$set(this.editableTabs,'management',[]);
				this.$set(this.editableTabs,'acetech',[]);
				
				this.editableTabs.imgList.forEach(async (imgitem,imgindex)=>{
					switch(imgitem.imgShopType){
						case "corporate":
							this.editableTabs.corporate.push(imgitem)
							break
						case "license":
							this.editableTabs.license.push(imgitem)
							break
						case "front":
							this.editableTabs.front.push(imgitem)
							break
						case "back":
							this.editableTabs.back.push(imgitem)
							break
						case "hygiene":
							this.editableTabs.hygiene.push(imgitem)
							break
						case "medical":
							this.editableTabs.medical.push(imgitem)
							break
						case "diligence":
							this.editableTabs.diligence.push(imgitem)
							break
						case "merchant":
							this.editableTabs.merchant.push(imgitem)
							break
						case "other":
							this.editableTabs.other.push(imgitem)
							break
						case "management":
							this.editableTabs.management.push(imgitem)
							break
						case "acetech":
							this.editableTabs.acetech.push(imgitem)
							break
						default:
							//这里是没有找到对应的值处理
							break
					}
				})
				
				 setTimeout(() => {
				   loading.close();
				 }, 500);
			},
			async getblock(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/auditShop/list?shopId='+this.$route.query.shopId)
				this.blocklist = res.data
				console.log(this.blocklist)
				 setTimeout(() => {
				   loading.close();
				 }, 500);
			},
			async approved(){/* 审批通过 */
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/auditShop/audit',{
					"auditAtatus":2,
					"shopId":this.$route.query.shopId,
					"auditRemark":this.approvedRemark
				})
				console.log(res)
				if(res.code!==200) {
					return this.$message.error('审批操作失败')
				}
				this.$message.success('审批通过')
				this.adoptFormVisible = false
				this.getList()
				this.getblock()
				loading.close();
			},
			async refuse(){/* 审批驳回 */
				if(this.refuseRemark.length<=2){
					this.$message({
					  message: '请填写驳回原因',
					  type: 'warning'
					});
					return
				}
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/auditShop/audit',{
					"auditAtatus":3,
					"shopId":this.$route.query.shopId,
					"auditRemark":this.refuseRemark
				})
				console.log(res)
				if(res.code!==200) {
					return this.$message.error('审批驳回操作失败')
				}
				this.$message.success('审批已驳回')
				this.refuseFormVisible = false
				this.getList()
				this.getblock()
				loading.close();
			}
		}
	}
</script>

<style lang="less" scoped>
	.approvaltitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.approvaltitle-left{
			display: flex;
			align-items: center;
			.approvalflowpath{
				display: flex;
				.approvalflowpath-li{
					width: 212px;
					height: 40px;
					line-height: 40px;
					position: relative;
					text-align: center;
					img{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
					}
					span{
						position: relative;
						z-index: 9;
						color: #fff;
						font-size: 14px;
					}
				}
			}
			
		}
	}
	.demo-image__preview{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.title{
		color: #1663af;font-weight: 600;margin-right: 0.625rem;margin-top: 15px;margin-bottom: 15px;
	}
	.infotable{
		width: 100%;
		text-align: center;
		font-size: 14px;
		tr{
			
		}
		td{
			width: 25%;
			&:nth-child(2n-1){
				background-color: #c0c0c0;
			}
		}
		.viewpicture{
			color: #006CFF;
			text-decoration: underline;
		}
	}
	.block{
		margin-top: 40px;
		.blocktit{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
